﻿<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="widget radius-bordered">
            <div class="widget-header">
                <span class="widget-caption">Angular Bootstrap Nav Tree</span>

                <div class="widget-buttons">
                    <a href="" widget-collapse></a>
                    <a href="" widget-dispose></a>
                </div>
            </div>
            <div class="widget-body" ng-controller="TreeViewCtrl">
                <div class="row">
                    <div class="col-lg-6  col-md-6 col-sm-12">
                        <div class="padding-30">
                            <button ng-click="try_changing_the_tree_data()" class="btn btn-default">Change The Tree Definition</button>
                            <button ng-click="try_async_load()" class="btn btn-default">Load Tree Data Asynchronously</button>
                            <hr />
                            <h5>Test the Tree Control API:</h5>
                            <button ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm">First Branch</button>
                            <div class="btn-group">
                                <button ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</button>
                                <button ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</button>
                            </div>
                            <hr/>
                            <div class="btn-group">
                                <button ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</button>
                                <button ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</button>
                            </div>
                            <hr />
                            <button ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm">Parent</button>
                            <div class="btn-group">
                                <button ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm">Expand</button>
                                <button ng-click="my_tree.collapse_branch()" class="btn btn-default btn-sm">Collapse</button>
                            </div>
                            <hr />
                            <div class="btn-group">
                                <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</button>
                                <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</button>
                            </div>
                            <hr />
                            <button ng-click="try_adding_a_branch()" class="btn btn-success btn-sm"><i class="fa fa-fw m-r-xs fa-plus"></i> Add Branch</button>
                        </div>
                    </div>
                    <div class="horizontal-space"></div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="padding-20">
                            <div class="alert alert-success">{{output}}</div>
                            <div class="bg-whitesmoke">
                                <span ng-if="doing_async">...loading...</span>
                                <abn-tree tree-data="my_data"
                                          tree-control="my_tree"
                                          on-select="my_tree_handler(branch)"
                                          expand-level="2"
                                          initial-selection="Granny Smith"
                                          icon-leaf="fa fa-file-o"
                                          icon-expand="fa fa-plus"
                                          icon-collapse="fa fa-minus">
                                </abn-tree>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>